<template>
	<el-dialog v-model="visible" :destroy-on-close="true" :width="1100" top="5" title="参数编辑">
		<el-card shadow="Never" :header="`参数${index}`" class="param-card" v-for="param, index in currentEditParams"
			:key="index">
			<el-form ref="formRef" :model="param" label-width="100px">
				<el-row>
					<el-col :span="8">
						<el-form-item label="参数类别" prop="paramType" clearable>
							<el-select v-model="param!.paramType" placeholder="请选择参数类别" style="width: 240px">
								<el-option label="对话框选择的常量" :value="0" />
								<el-option label="表达式" :value="1" />
							</el-select>
						</el-form-item>
					</el-col>
					<template v-if="param.paramType == 0">
						<el-col :span="8">
							<el-form-item label="输入框类型">
								<el-select v-model="param.dialog">
									<el-option v-for="item in dict.dialog" :key="item.value" :label="item.name"
										:value="item.value">
									</el-option>
								</el-select>
							</el-form-item>
						</el-col>
						<el-col :span="8">
							<el-form-item label="占位文本">
								<el-input v-model="param.placeholder" />
							</el-form-item>
						</el-col>
					</template>
					<template v-if="param.paramType == 1">
						<el-col :span="8">
							<el-form-item label="返回值类型">
								<el-select v-model="param.returnType" placeholder="请选择">
									<el-option v-for="item in dict.returnType" :key="item.value" :label="item.name"
										:value="item.value">
									</el-option>
								</el-select>
							</el-form-item>
						</el-col>
						<el-col :span="8">
							<el-form-item label="限定类别">
								<el-select v-model="param.category" placeholder="请选择" :clearable="true">
									<el-option v-for="item in dict.category" :key="item.value" :label="item.name"
										:value="item.value">
									</el-option>
								</el-select>
								<gsjt-tooltip title="（可选）限定该参数只能从指定类别的表达式中选择"></gsjt-tooltip>
							</el-form-item>
						</el-col>
						<el-col :span="8">
							<el-form-item label="占位文本">
								<el-input v-model="param.placeholder" />
							</el-form-item>
						</el-col>
					</template>
				</el-row>
			</el-form>
		</el-card>
		<template #footer>
			<el-button type="primary" @click="addParam">添加参数</el-button>
			<el-button @click="visible = false">取消</el-button>
			<el-button type="primary" @click="handleSubmit">确定</el-button>
		</template>
	</el-dialog>
</template>

<script setup lang="ts" name="UserDialog">
import { ref, reactive } from 'vue';
import { ElMessage, FormInstance, FormRules } from 'element-plus';
import { objectExtract } from '/@/utils/util'
import rulesObj from './rules';
import { getExpressionDict, edit } from '/@/api/workflow/expression'

const visible = ref(false), currentEditParams = ref<any>([]);

const dict = ref<any>({
	category: [],
	returnType: [],
	dialog: []
});


//验证规则
const rules = reactive<FormRules>(rulesObj);

const dialogData = reactive<any>({
	title: '',
	rowData: null,
	getTableList: null
});

const addParam = () => {
	currentEditParams.value.push({});
}

const acceptParams = async (params: any) => {
	dialogData.title = params.title;
	dialogData.rowData = params.rowData;
	dialogData.getTableList = params.getTableList;
	const { data } = await getExpressionDict(null);
	dict.value = data;
	visible.value = true;
	if (dialogData.rowData.params) {
		const params = JSON.parse(dialogData.rowData.params);
		currentEditParams.value = params.map(v => {
			v.paramType = Boolean(v.dialog) ? 0 : 1;
			return v;
		})
	} else {
		currentEditParams.value = [{}];
	}
}

const handleSubmit = async () => {
	let data = currentEditParams.value.map(p => {
		if (p.paramType == 1) {
			return objectExtract(p, "returnType,placeholder,category")
		} else {
			return objectExtract(p, "placeholder,dialog")
		}
	})
	data = {
		id: dialogData.rowData.id,
		params: data,
	}
	const res = await edit(data);
	if (res && res.code === 0) {
		visible.value = false;
		dialogData.getTableList();
		ElMessage.success('操作成功');
	}
}

defineExpose({
	acceptParams,
});
</script>

<style lang="scss" scoped>
.param-card {
	margin-top: 8px;
}
</style>
